<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import henan_geo from "@/assets/data/henan_geo.json";

const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    echarts.registerMap("henan", JSON.stringify(henan_geo));
    const myChart = echarts.init(oChart.value, null, {});
    const option = {
        visualMap: {
            left: "right",
            show: false,
            min: 0,
            max: 1000,
            inRange: { color: ["#5c7bd9", "#ff7070"] },
            calculable: true,
        },
        geo3D: {
            map: "henan",
            regionHeight: 2,
            boxHeight: 30,
            label: { show: false, color: "#92dde1", fontSize: 18, fontWeight: "bold", position: "top" },
            itemStyle: { color: "#9fd1f2", borderWidth: 2, borderColor: "#92dde1" },
            shading: "realistic",
            realisticMaterial: {
                detailTexture: "https://dl.polyhaven.org/file/ph-assets/Textures/png/4k/white_plaster_02/white_plaster_02_diff_4k.png",
                roughness: "https://dl.polyhaven.org/file/ph-assets/Textures/png/4k/white_plaster_02/white_plaster_02_rough_4k.png",
                normalTexture: "https://dl.polyhaven.org/file/ph-assets/Textures/png/4k/white_plaster_02/white_plaster_02_nor_gl_4k.png",
            },
            viewControl: { autoRotate: true, distance: 80, autoRotateSpeed: 5 },
            light: { main: { intensity: 2, shadow: true, shadowQuality: "ultra" }, ambient: { intensity: 0.1 } },
            postEffect: { enable: true, bloom: { enable: true } },
            temporalSuperSampling: { enable: true },
        },
        series: {
            name: "销售额",
            type: "bar3D",
            coordinateSystem: "geo3D",
            minHeight: 1,
            itemStyle: {},
            bevelSize: 0.3,
            label: {
                show: false,
                distance: 1,
                fontSize: 18,
                fontWeight: "bold",
                padding: [5, 20],
                backgroundColor: "#000",
                borderWidth: 1,
                borderColor: "#92dde1",
                formatter: ({ name, value }: { name: string; value: number[] }) => `${name}: ${value[2]}吨`,
            },
            shading: "realistic",
            animation: true,
            data: [
                { name: "郑州市", value: [113.665412, 34.757975, 857], label: { show: true } },
                { name: "开封市", value: [114.341447, 34.797049, 375], label: { show: true } },
                { name: "洛阳市", value: [112.434468, 34.663041, 324], label: { show: true } },
                { name: "平顶山市", value: [113.307718, 33.735241, 34] },
                { name: "安阳市", value: [114.352482, 36.103442, 2] },
                { name: "鹤壁市", value: [114.295444, 35.748236, 6] },
                { name: "新乡市", value: [113.883991, 35.302616, 84] },
                { name: "焦作市", value: [113.238266, 35.23904, 51] },
                { name: "濮阳市", value: [115.041299, 35.768234, 31] },
                { name: "许昌市", value: [113.826063, 34.022956, 144] },
                { name: "漯河市", value: [114.026405, 33.575855, 211] },
                { name: "三门峡市", value: [111.194099, 34.777338, 14] },
                { name: "南阳市", value: [112.540918, 32.999082, 24] },
                { name: "商丘市", value: [115.650497, 34.437054, 246] },
                { name: "信阳市", value: [114.075031, 32.123274, 256] },
                { name: "周口市", value: [114.649653, 33.620357, 61] },
                { name: "驻马店市", value: [114.024736, 32.980169, 3] },
                { name: "济源市", value: [112.590047, 35.090378, 8] },
            ],
        },
    };
    myChart.setOption(option);
});
</script>

<template>
    <div class="map-area">
        <div class="bg"></div>
        <div ref="oChart" class="chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.map-area {
    position: relative;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 800px;
        height: 800px;
        background: url("@/assets/images/bg.png") 0 0 / 100% 100%;
        animation: rotate 20s ease-in-out infinite alternate-reverse;
    }
    .chart {
        position: relative;
        width: 100%;
        height: 100%;
    }
}
</style>
